import React, { Component } from 'react'

import './icon.css'
import './cart.scss'

export default class Cart extends Component {
  state = {
    goods: [{
      id: 1,
      name: '富到流油的高邮咸鸭蛋 75克*10枚',
      img_url: 'https://yanxuan-item.nosdn.127.net/2e97f232711f191fb03f96774769fb45.png?type=webp&imageView&thumbnail=160x0&quality=75',
      price: 33,
      num: 1,
      selected: true
    },{
      id: 2,
      name: '网易智造无烟便携艾灸盒（App智能版）',
      img_url: 'https://yanxuan-item.nosdn.127.net/c13800873b7f2528408aa2c3992a3409.png?type=webp&imageView&thumbnail=160x0&quality=75',
      price: 349,
      num: 1,
      selected: true
    },{
      id: 3,
      name: '富到流油的高邮咸鸭蛋 75克*10枚',
      img_url: 'https://yanxuan-item.nosdn.127.net/2e97f232711f191fb03f96774769fb45.png?type=webp&imageView&thumbnail=160x0&quality=75',
      price: 33,
      num: 1,
      selected: true
    },{
      id: 4,
      name: '网易智造无烟便携艾灸盒（App智能版）',
      img_url: 'https://yanxuan-item.nosdn.127.net/c13800873b7f2528408aa2c3992a3409.png?type=webp&imageView&thumbnail=160x0&quality=75',
      price: 349,
      num: 1,
      selected: true
    },{
      id: 5,
      name: '富到流油的高邮咸鸭蛋 75克*10枚',
      img_url: 'https://yanxuan-item.nosdn.127.net/2e97f232711f191fb03f96774769fb45.png?type=webp&imageView&thumbnail=160x0&quality=75',
      price: 33,
      num: 1,
      selected: true
    },{
      id: 6,
      name: '网易智造无烟便携艾灸盒（App智能版）',
      img_url: 'https://yanxuan-item.nosdn.127.net/c13800873b7f2528408aa2c3992a3409.png?type=webp&imageView&thumbnail=160x0&quality=75',
      price: 349,
      num: 1,
      selected: true
    }],
    totalSelected: true,
    totalNum: 0,
    totalPrice: 0
  }

  //必要的数据计算
  init = ()=> {
    let num = 0
    let price = 0
    for(let i in this.state.goods) {
      if(this.state.goods[i].selected === true) {
        num += this.state.goods[i].num
        price += this.state.goods[i].price * this.state.goods[i].num
      }
    }
    this.setState({
      totalNum: num,
      totalPrice: price
    })
  }

  //在将要mount时初始化数据
  componentWillMount() {
    this.init()
  }

  //点击选择或取消某一商品按钮
  handleSelected = (index) => {
    let goods = this.state.goods
    let flag = this.state.goods[index].selected
    goods[index].selected = !flag
    let isAllSelected = goods.every(el=>{
      return el.selected === true
    })
    this.setState({
      goods,
      totalSelected: isAllSelected
    })
    this.init()
  }

  //点击全选按钮事件
  handleAllSelect = ()=> {
    let flag = this.state.totalSelected
    let goods = this.state.goods
    goods.forEach(el=>{
      el.selected = !flag
    })
    this.setState({
      goods,
      totalSelected: !flag
    })
    this.init()
  }

  //增加商品数量
  handleAdd = (index)=> {
    let goods = this.state.goods
    goods[index].num++
    this.setState({
      goods
    })
    this.init()
  }

  //减少商品数量
  handleSub = (index)=> {
    let goods = this.state.goods
    if(goods[index].num > 1){
      goods[index].num--
    }else{
      alert('最少选一件喔~')
    }
    this.setState({
      goods
    })
    this.init()
  }

  render() {
    return (
      <div className='app-cart'>
        <div className='cart-goods'>
          {
            this.state.goods.map((el, index)=>{
            return (
          <div className='goods-item' key={el.id}>
            <div className='goods-select'>
              <i className={el.selected ? 'iconfont icon-xuanze' : 'iconfont icon-xuanze1'} onClick={this.handleSelected.bind(this, index)}></i>
            </div>
            <div className='goods-img'>
              <img src={el.img_url} alt='' />
            </div>
            <div className='goods-msg'>
              <div className='goods-name'>
                {el.name}
              </div>
              <div className='goods-msg-bottom'>
                <div className='goods-price'>
                  {'￥'+el.price}
                </div>
                <div className='goods-num'>
                  <button onClick={this.handleSub.bind(this, index)}>-</button>
                  <span>{el.num}</span>
                  <button onClick={this.handleAdd.bind(this, index)}>+</button>
                </div>
              </div>
            </div>
          </div>)
            })}
        </div>
        <div className='cart-buy'>
          <div className='total-select'>
            <i className={this.state.totalSelected ? 'iconfont icon-xuanze' : 'iconfont icon-xuanze1'} onClick={this.handleAllSelect}></i>
            <span>{`已选（${this.state.totalNum}）`}</span>
          </div>
          <div className='goods-cal'>
            <div className='total-price'>
              <p>合计:<span>{'￥'+this.state.totalPrice}</span></p>
            </div>
            <button>
              下单
            </button>
          </div>
        </div>
      </div>
    )
  }
}